    * {
      /*初始化样式*/
      margin: 0;
      padding: 0;
    }
    a { color: #666; outline: 0; text-decoration: none; }
    html,body{
      width: 100vw;

      height: 100vh;
      overflow: hidden;
    }
    body {
      /*让 body 初始 width 和 height 就 等于 页面可视区域的 宽高*/

      /*用于 测试的 样式*/
      /* background-color: #0000; */
      color: #FFF;
      letter-spacing: 4px;
      font-size: 28px;
      /*文字居中*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
    @media screen and (orientation:portrait) {
      /*竖屏样式*/
      body {
        transform-origin: 0 0;
        transform: rotateZ(90deg) translateY(-100%);
       
      }
    }
    /*测试 边边角角*/
    
    #modoll{
      width: 94%;
      height: 88%;
      /* background-color: #9BCD9B; */
    }
    /* #modoll div{
      margin-bottom:  0.5%;
    }*/
    .hred{
      width: 100%;
      height: 32%;
      background-color: #0F0F0F;
      /* border: 1px solid red; */
    }
    img{
      float: left;
    }
    .hred .tu1{
      width: 45%;
     height: 100%;
      /* background-color: red; */
    }
  
    .hred .tu2{
      left: 45%;
      width: 55%;
      height: 100%;
      /* background-color: red; */
    }
    .hred2{
      margin-top: 1%;
      top: 34%;
      width: 100%;
      height: 32%;
      background-color: #0F0F0F;
      /* border: 1px solid yellow; */
    }
    /* .hred2 .tu{
    position: absolute;
    background: url(../images/buying/12.png) no-repeat;
    background-size: 100%;
    } */
    .hred2 .tu1{
      width: 60%;
      height: 100%;
  
      /* background-color: red; */
    }
    .hred2 .tu2{
      left: 60%;
      width: 40%;
      height: 100%;
      /* background-color: red; */
    }
    .hred3{
     margin-top: 1%;
      width: 100%;
      height: 32%;
      background-color:#0F0F0F;
      /* border: 1px solid #fff; */
    }
    .hred3 .tu1{
      width: 45%;
      height: 100%;
      /* background-color: red; */
    }
    .hred3 .tu2{
      left: 45%;
      width: 55%;
      height: 100%;
      /* background-color: red; */
    }
    #modoll .left{
        width:0.6rem;
        height: 0.6rem;
        position: absolute;
        top: 45%;
        left: 1%;
        border-radius: 50%;
        background: #FFF;
        opacity: 0.5;
        color: black;
        text-align: center;
        line-height: 0.55rem;
        /* background-color: red; */
    }
    
    #modoll .right{
      width:0.6rem;
      height: 0.6rem;
      position: absolute;
      top: 45%;
      right: 1%;
      border-radius: 50%;
      background: #FFF;
      opacity: 0.5;
      color: black;
      
      line-height: 0.55rem;
    }
    .right p{
      margin-left: 0.1rem;
      text-align: center;
    }
    #modoll .right img{
      position: absolute;
      width: 120%;
      left: -15%; 
      top: 35%;
      transform: rotate(180deg);
    }